<template>
  <div class="check-info-main">
    <el-descriptions :title=projectInfo.projectName class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{ projectInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-phone-outline"></i>
          手机号
        </template>
        {{ projectInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-collection"></i>
          专业
        </template>
        {{ projectInfo.major }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          居住地
        </template>
        {{ projectInfo.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-collection-tag"></i>
          备注
        </template>
        <el-tag size="small">{{ this.categoryName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          申请金额
        </template>
        {{ projectInfo.projectPrice }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          申请时间
        </template>
        {{ projectInfo.applyTime.replace("T", " ") }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          银行卡号
        </template>
        {{ projectInfo.bankNumber }}
      </el-descriptions-item>
    </el-descriptions>
    <!--    <el-steps :active=projectInfo.checkProgress finish-status="success">-->
    <!--      <el-step title="提交文件"></el-step>-->
    <!--      <el-step title="校级审核"></el-step>-->
    <!--      <el-step title="教育局审核"></el-step>-->
    <!--      <el-step title="审核完成"></el-step>-->
    <!--    </el-steps>-->
    <el-table
        :data="fileList"
        style="width: 50%">
      <el-table-column
          prop="file_name"
          label="文件名"
          width="300">
      </el-table-column>
      <el-table-column
          prop="file_type"
          label="文件类型"
          width="80">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="previewFile(scope.row)" type="text" size="small">预览</el-button>
          <el-button @click="downloadFile(scope.row)" type="text" size="small">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-input
        type="textarea"
        :rows="3"
        style="width: 50%;margin:10px auto auto 230px"
        placeholder="请输入驳回原因，若审核通过请勿填写！"
        v-model="projectInfo.failRemark">
    </el-input>
    <el-steps :active=projectInfo.checkProgress finish-status="error">
      <el-step v-for="item in checkList" :key="item.id" :title="item.title"></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: "CheckedRejectInfo",
  data() {
    return {
      applyId: 0,
      projectId: 0,
      categoryName: "",
      buttonValue: true,
      fileList: [],
      checkList: [],
      fail_remark: "",
      schoolCheck: [
        {
          id: 1,
          title: "提交文件"
        },
        {
          id: 2,
          title: "校级审批"
        },
        {
          id: 3,
          title: "审批完成"
        }
      ],
      cityCheck: [
        {
          id: 1,
          title: "提交文件"
        },
        {
          id: 2,
          title: "校级审批"
        },
        {
          id: 3,
          title: "教育局审批"
        },
        {
          id: 4,
          title: "审批完成"
        }
      ],
      projectInfo: [{
        projectName: "",
        name: "",
        phone: "",
        major: "",
        address: "",
        bankNumber: "",
        category: -1,
        projectPrice: 0,
        checkProgress: 0,
        failRemark: "",
        applyTime: "",
      }
      ]
    }
  },
  created() {
    this.applyId = this.$route.query.applyId
    this.getApplyDetail()
    this.getApplyFile()
  },
  methods: {
    getApplyDetail() {
      this.$axios.get("/apply/getApplyDetailById?applyId=" + this.applyId
      ).then(res => {
        this.projectInfo = res.data.data
        this.getCategoryName()
      })
    },
    getCategoryName() {
      if (this.projectInfo.category === 1 || this.projectInfo.category === 3) {
        this.categoryName = "校级"
        this.checkList = this.schoolCheck
      }
      if (this.projectInfo.category === 2 || this.projectInfo.category === 4) {
        this.categoryName = "市级"
        this.checkList = this.cityCheck
      }
    },
    getApplyFile() {
      this.$axios.get("/apply/getApplyFileById?applyId=" + this.applyId
      ).then(res => {
            this.fileList = res.data.data
          }
      )
    },
    previewFile(row) {
      if (row.file_type === ".pdf") {
        this.$router.push({
          path: "/pdf", query: {
            file_name: row.file_name,
          }
        })
      } else {
        this.$message.error("暂不支持预览该格式")
      }
    },
    downloadFile(row) {
      this.$axios.get("/download?file_name=" + row.file_name, {responseType: 'blob'}).then(res => {
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});//type是文件类，详情可以参阅blob文件类型
        // 创建新的URL并指向File对象或者Blob对象的地址
        const blobURL = window.URL.createObjectURL(blob)
        // 创建a标签，用于跳转至下载链接
        const tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', row.file_name)
        // 兼容：某些浏览器不支持HTML5的download属性
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        // 挂载a标签
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        // 释放blob URL地址
        window.URL.revokeObjectURL(blobURL)
      })
    },
    checkSuccess() {
      this.$axios.get("/adminApply/checkSuccess?apply_id=" + this.applyId + "&role=" + this.$store.getters.getUser.role).then(res => {
        if (res.data.code === 200) {
          this.$message.success("审核已完成")
          this.sendMessageSuccess()
          this.$router.push("/checkProject")
        }
      })
    },
    sendMessageSuccess(){
      this.$axios.post("/message/sendMessage",{
        author: parseInt(this.$store.getters.getUser.id),
        applyId: parseInt(this.applyId),
        message: "您的申报项目："+ this.projectInfo.projectName+"，审核成功！请等待下一步操作。"
      })
    },
    rejectApply() {
      this.$axios.post("/adminApply/rejectApply", {
        applyId: parseInt(this.applyId),
        failRemark: this.fail_remark,
        role: this.$store.getters.getUser.role
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("申请已驳回")
          this.sendMessageReject()
          this.$router.push("/adminHome")
        }
      })
    },
    sendMessageReject() {
      this.$axios.post("/message/sendMessage",{
        author: parseInt(this.$store.getters.getUser.id),
        applyId: parseInt(this.applyId),
        message: "您的申报项目："+ this.projectInfo.projectName+"，被驳回，驳回原因："+this.projectInfo.failRemark+"，请重新申报"
      })
    }
  }
}
</script>

<style scoped>
.el-descriptions {
  margin-top: 17px;
}

.el-steps {
  width: 80%;
  margin-top: 100px;
  margin-left: 100px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  margin: 5px auto 5px 200px;
  width: 480px;
}

.el-table {
  margin: 10px auto auto 230px
}

.check {
  width: 100px;
  margin-top: 20px;
}

.check-info-reject {
  margin-top: 5px;
}

.check-info-main {
  width: 100%;
}
</style>